﻿@{
    Layout = null;
}

<h2>.NET MVC验证码</h2>

<img src="/Login/CreateVerifyCode" id="verifycode" alt="验证码获取失败" title="点击刷新" style="border:1px solid black;" />
<input type="text" value="" id="inputcode" />
<br />
<input type="button" value="提交" id="ok" />

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $("#ok").click(function (e) {
            var thecode = $("#inputcode").val();
            $.ajax({
                url: "/Login/CheckVerifyCode",
                type: "Get",
                data: { thecode: thecode },
                success: function (data) {
                    if (data == "ok") {
                        alert("验证码输入正确。");
                    } else {
                        alert("验证码输入错误。");

                        //验证码不正确时自动刷新验证码
                        document.getElementById("verifycode").src = "/Login/CreateVerifyCode/" + Math.floor(Math.random() * 10000);
                    }
                },
                error: function () {
                    alert("提交失败！");
                }
            })
        })

        //点击刷新（局部）验证码
        $("#verifycode").click(function (e) {
            //TODO:这里，可在客户端作一个简单过滤，防止客户端恶意请求服务器。当然，最好的操作方式是在服务器端也做这个操作
            this.src = "/Login/CreateVerifyCode/" + Math.floor(Math.random() * 10000);
        })
    })
</script>
